<template>
  <div class="cell">
    <a-button type="primary" @click="showList = true">
      编辑内容
    </a-button>
    <a-modal :visible="showList" title="编辑栏目" @cancel="showList = false" :width="1000" @ok="showList = false" okText="确定" cancelText="取消">
      <div class="cellList acea-row row-middle" v-for="(item,index) in list" :key="index">
        {{'栏目'+parseInt(index+1)}}:
        <div class="item acea-row row-middle">
          左侧标题:
          <a-input v-model="item.title" style="width:120px;margin-left:5px;" />
        </div>
        <div class="item acea-row row-middle">
          右侧内容:
          <a-input v-model="item.value" style="width:120px;margin-left:5px;" />
        </div>
        <div class="item acea-row row-middle">
          描述信息:
          <a-input v-model="item.label" style="width:120px;margin-left:5px;" />
        </div>
        <div class="item acea-row row-middle">
          左侧图标:
          <iconSelect @change="e=>item.icon = e" :value="item.icon" style="width:140px;margin-left:5px;"/>
        </div>
        <a-icon :type="index==0?'plus-circle':'minus-circle'" class="list-icon" @click="handle(index)" />
      </div>
    </a-modal>
  </div>
</template>

<script>
import iconSelect from '../iconSelector'
export default {
  components:{
    iconSelect
  },
  name:"cell",
  props:{
    list:{
      type:Array,
      default:[]
    }
  },
  data() {
    return {
      showList:false
    }
  },
  methods: {
    handle(idx){
      if(idx == 0){
        let obj = {
          icon:'',
          title:'',
          value:'',
          label:''
        }
        this.list.push(obj)
      }else{
        this.list.splice(idx,1)
      }
    }
  },
}
</script>

<style scoped>
  .list{
    margin-bottom: 20px;
  }
  .list-icon{
    font-size:18px;
    margin-left: 20px;
    cursor: pointer;
  }
  .cellList{
    margin-bottom: 20px;
  }
  .cellList .item{
    margin-left: 20px;
  }
</style>